<template>
  <div>
    <h1>我是kfc组件</h1>
    <h1> a1is {{a1}}</h1>
  </div>
</template>

<script>
import { onMounted, toRefs, watch } from 'vue';

export default {
  name: 'kfc',
  props: ['a1', 'a2'],
  setup (props, ctx) {
    // ctx是上下文对象 是setup的第二个参数
    // why ctx 因为no this
    //  this.$emit => ctx.emit
    // data computed  methods 通过ctx是没有权限访问的
    console.log(ctx);

    // setup函数的第一个参数就是自定义的属性
    // 在setup的props是响应式的
    // 取出 props的值  推荐的方式是 通过  toRefs来结构赋值

    // eslint-disable-next-line no-unused-vars
    const { a1, a2 } = toRefs(props);
    // 通过 toRefs结构出来的属性  就是ref()
    // 所以使用到a1 a1的时候  a1.value

    watch(a1, () => {
      console.log(`a1 new value ${a1.value}`);
    });
    onMounted(() => ctx.emit('eee'));
  },
};
</script>

<style scoped>
</style>
